//a strong namespace
Ext.namespace('com.quizzpot.tutorial');

//an object for this tutorial
com.quizzpot.tutorial.Element = {
	init: function(){
		//get the element
		var el = Ext.Element.get('panel');
		console.debug(el);
		//adding and removing CSS clases
		el.addCls('element');
		el.removeCls('anotherClass');
		//setting styles to the element
		el.setStyle('background-color','#CFE5FA');
		el.setStyle('border','1px solid #99BBE8');
		//center the elemento on the screen
		el.center();
		//setting the opacity to 85%
		el.setOpacity(.85);
		
		//getting the parent of the element
		var parent = el.parent();
		//setting some styles to the parent
		parent.setStyle({
			'background-color':'#ccc',
			'font-family':'"Trebuchet MS",Arial,sans-serif',
			'font-size':'.9em'
		});
		//setting the content unselectable
		el.unselectable();
		//removes the element 
		//el.remove();
		//saving memory 
		Ext.Element.fly('footer').setStyle('border','1px solid #aaa');
	}
}

Ext.onReady(com.quizzpot.tutorial.Element.init,com.quizzpot.tutorial.Element);